<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
	   .tab-content {
			display: none;
		}

		.tab-content.active {
			display: block;
		}

		.tab-radio {
			display: none;
		}

		.tab-label {
			width: 100px;
			height: 100px;
			display: block;
			padding: 10px;
			cursor: pointer;
			background-color: lightgray;
		}

		.tab-radio:checked + .tab-label + .tab-content {
			display: block;
		}
	
		.content{
			display: flex;
		}
		</style>
	</head>
	<body>
		
		<div class="content">
			<div>
				<input type="radio" name="tab" id="tab1" class="tab-radio" >
				<label for="tab1" class="tab-label">Tab 1</label>
			</div>
			
			
			<div>
				<input type="radio" name="tab" id="tab2" class="tab-radio">
				<label for="tab2" class="tab-label">Tab 2</label>
			</div>
			
			<div>
				<input type="radio" name="tab" id="tab3" class="tab-radio">
				<label for="tab3" class="tab-label">Tab 3</label>
			</div>
			
			
			
			
		</div>
		
		<div>
			<div class="tab-content">Content 1</div>
			<div class="tab-content">Content 2</div>
			<div class="tab-content">Content 3</div>
		</div>
		

	</body>
</html>